<!DOCTYPE html>
<html>
<head>
    <title>Message Logs</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .user-section {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .username {
            color: #333;
            font-weight: bold;
        }
        .menu {
            background-color: #f8f9fa;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .menu a {
            text-decoration: none;
            color: #333;
            padding: 8px 16px;
            margin-right: 10px;
            border-radius: 4px;
        }
        .menu a.active {
            background-color: #4CAF50;
            color: white;
        }
        .menu a:hover {
            background-color: #ddd;
        }
        .logs-container {
            background-color: #f5f5f5;
            padding: 20px;
            border-radius: 5px;
            margin-top: 20px;
            overflow-x: auto;
        }
        .log-entry {
            padding: 8px 10px;
            border-bottom: 1px solid #eee;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            white-space: pre-wrap;
            word-wrap: break-word;
            line-height: 1.4;
        }
        .log-entry:last-child {
            border-bottom: none;
        }
        .button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 4px;
        }
        .logout-button {
            background-color: #f44336;
        }
        .refresh-button {
            background-color: #2196F3;
            margin-bottom: 10px;
        }
        .header-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .auto-refresh {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-right: 10px;
        }
        .auto-refresh input {
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>Message Logs</h1>
        <div class="user-section">
            <span class="username">{{ username }}</span>
            <a href="{{ url_for('logout') }}" class="button logout-button">Logout</a>
        </div>
    </div>

    <div class="menu">
        <a href="{{ url_for('index') }}">Configuration</a>
        <a href="{{ url_for('logs') }}" class="active">Message Logs</a>
    </div>

    <div class="header-actions">
        <label class="auto-refresh">
            <input type="checkbox" id="autoRefresh" checked>
            Auto refresh (30s)
        </label>
        <button class="button refresh-button" onclick="refreshLogs()">Refresh Now</button>
    </div>

    <div class="logs-container">
        <div id="logEntries">
            {% for log in logs %}
            <div class="log-entry">{{ log }}</div>
            {% endfor %}
        </div>
    </div>

    <script>
        let autoRefreshInterval;

        function startAutoRefresh() {
            if (autoRefreshInterval) {
                clearInterval(autoRefreshInterval);
            }
            autoRefreshInterval = setInterval(refreshLogs, 30000);
        }

        function refreshLogs() {
            fetch('/api/logs')
                .then(response => {
                    if (!response.ok) {
                        if (response.status === 401) {
                            window.location.href = '/login';
                            return;
                        }
                        throw new Error('Failed to load logs');
                    }
                    return response.json();
                })
                .then(data => {
                    const logEntries = document.getElementById('logEntries');
                    logEntries.innerHTML = data.logs.map(log => 
                        `<div class="log-entry">${log}</div>`
                    ).join('');
                })
                .catch(error => {
                    console.error('Error loading logs:', error);
                });
        }

        // 自动刷新控制
        document.getElementById('autoRefresh').addEventListener('change', function(e) {
            if (e.target.checked) {
                startAutoRefresh();
            } else {
                clearInterval(autoRefreshInterval);
            }
        });

        // 初始化自动刷新
        if (document.getElementById('autoRefresh').checked) {
            startAutoRefresh();
        }
    </script>
</body>
</html>
